<template>
  <j-modal
    :title="'生产计划详情 - ' + model.planName"
    :width="1400"
    :visible="visible"
    :footer="null"
    switchFullscreen
    @cancel="handleCancel"
  >
    <a-spin :spinning="loading">
      <!-- 基本信息 -->
      <a-card title="基本信息" :bordered="false" style="margin-bottom: 16px">
        <a-row :gutter="24">
          <a-col :span="8">
            <div class="detail-item">
              <span class="label">计划编号：</span>
              <span class="value">{{ model.planNo }}</span>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="detail-item">
              <span class="label">计划名称：</span>
              <span class="value">{{ model.planName }}</span>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="detail-item">
              <span class="label">关联订单：</span>
              <span class="value">{{ model.orderNo || '-' }}</span>
            </div>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="8">
            <div class="detail-item">
              <span class="label">计划类型：</span>
              <a-tag v-if="model.planType == 1" color="blue">模板生成</a-tag>
              <a-tag v-else-if="model.planType == 2" color="green">自定义创建</a-tag>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="detail-item">
              <span class="label">生产模板：</span>
              <span class="value">{{ model.templateName || '-' }}</span>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="detail-item">
              <span class="label">状态：</span>
              <a-tag v-if="model.status == 0" color="orange">待审核</a-tag>
              <a-tag v-else-if="model.status == 1" color="blue">已审核</a-tag>
              <a-tag v-else-if="model.status == 2" color="cyan">已下发</a-tag>
              <a-tag v-else-if="model.status == 3" color="purple">已领取</a-tag>
              <a-tag v-else-if="model.status == 4" color="brown">生产中</a-tag>
              <a-tag v-else-if="model.status == 5" color="success">已完成</a-tag>
              <a-tag v-else-if="model.status == 6" color="error">已取消</a-tag>
            </div>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="8">
            <div class="detail-item">
              <span class="label">优先级：</span>
              <a-tag v-if="model.priority == 1" color="green">低</a-tag>
              <a-tag v-else-if="model.priority == 2" color="orange">中</a-tag>
              <a-tag v-else-if="model.priority == 3" color="red">高</a-tag>
            </div>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="8">
            <div class="detail-item">
              <span class="label">计划数量：</span>
              <span class="value">{{ model.planQuantity }}</span>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="detail-item">
              <span class="label">实际数量：</span>
              <span class="value">{{ model.actualQuantity || 0 }}</span>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="detail-item">
              <span class="label">完成进度：</span>
              <a-progress
                :percent="model.progressPercentage || 0"
                :status="model.progressPercentage == 100 ? 'success' : 'active'"
                style="width: 120px"
              />
            </div>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="8">
            <div class="detail-item">
              <span class="label">计划开始日期：</span>
              <span class="value">{{ model.planStartDate }}</span>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="detail-item">
              <span class="label">计划结束日期：</span>
              <span class="value">{{ model.planEndDate }}</span>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="detail-item">
              <span class="label">计划负责人：</span>
              <span class="value">{{ model.planManager }}</span>
            </div>
          </a-col>
        </a-row>

        <a-row :gutter="24" v-if="model.participantNames">
          <a-col :span="8">
            <div class="detail-item">
              <span class="label">参与者：</span>
              <span class="value">{{ model.participantNames }}</span>
            </div>
          </a-col>
        </a-row>

        <a-row :gutter="24" v-if="model.remark">
          <a-col :span="24">
            <div class="detail-item">
              <span class="label">备注：</span>
              <span class="value">{{ model.remark }}</span>
            </div>
          </a-col>
        </a-row>
      </a-card>

      <!-- 工种任务列表 -->
      <a-card title="工种任务" :bordered="false">
        <a-table
          :columns="taskColumns"
          :dataSource="model.tasks || []"
          :pagination="false"
          size="small"
          bordered
          :scroll="{ x: 1200 }"
        >
          <template slot="workTypeName" slot-scope="text, record">
            <a-tag color="blue">{{ record.workTypeName }}</a-tag>
          </template>
          <template slot="productInfo" slot-scope="text, record">
            <a-tag color="blue">{{ record.productInfo }}</a-tag>
          </template>

          <template slot="sequence" slot-scope="text">
            <a-tag color="purple">{{ text }}</a-tag>
          </template>

          <!-- 0-待领取,1-已领取,2-进行中,3-已完成,4-暂停,5-部分领取 -->
          <template slot="status" slot-scope="text">
            <a-tag v-if="text == 0" color="orange">待领取</a-tag>
            <a-tag v-else-if="text == 1" color="blue">已领取</a-tag>
            <a-tag v-else-if="text == 2" color="brown">进行中</a-tag>
            <a-tag v-else-if="text == 3" color="green">已完成</a-tag>
            <a-tag v-else-if="text == 4" color="red">已暂停</a-tag>
            <a-tag v-else-if="text == 5" color="cyan">部分领取</a-tag>
          </template>

          <template slot="progress" slot-scope="text, record">
            <a-progress
              :percent="
                record.completedQuantity && record.taskQuantity
                  ? Math.round((record.completedQuantity / record.taskQuantity) * 100)
                  : 0
              "
              size="small"
              :status="record.status == 4 ? 'success' : 'active'"
            />
          </template>

          <template slot="participantNames" slot-scope="text, record">
            <span v-if="record.participantNames">{{ record.participantNames }}</span>
            <span v-else style="color: #999">未领取</span>
          </template>

          <template slot="actualStartTime" slot-scope="text">
            <span v-if="text">{{ text }}</span>
            <span v-else style="color: #999">-</span>
          </template>

          <template slot="actualEndTime" slot-scope="text">
            <span v-if="text">{{ text }}</span>
            <span v-else style="color: #999">-</span>
          </template>

          <template slot="pieceRateStandard" slot-scope="text">
            <span v-if="text">{{ text }}</span>
            <span v-else style="color: #999">-</span>
          </template>

          <template slot="collaborationType" slot-scope="text">
            <a-tag v-if="text == 0" color="green">独立完成</a-tag>
            <a-tag v-else-if="text == 1" color="blue">协作完成</a-tag>
            <a-tag v-else-if="text == 2" color="orange">分段完成</a-tag>
            <a-tag v-else color="default">-</a-tag>
          </template>

          <template slot="allowPartialClaim" slot-scope="text">
            <a-badge v-if="text == 1" status="success" text="是" />
            <a-badge v-else-if="text == 0" status="default" text="否" />
            <a-badge v-else status="default" text="-" />
          </template>
        </a-table>
      </a-card>
    </a-spin>
  </j-modal>
</template>

<script>
import { getAction } from '@/api/manage'

export default {
  name: 'PlanDetailModal',
  data() {
    return {
      visible: false,
      loading: false,
      model: {},
      url: {
        detail: '/mes/plan/detail',
      },
      taskColumns: [
        {
          title: '工序',
          dataIndex: 'sequence',
          width: 80,
          align: 'center',
          scopedSlots: { customRender: 'sequence' },
        },
        {
          title: '工种',
          dataIndex: 'workTypeName',
          width: 120,
          scopedSlots: { customRender: 'workTypeName' },
        },
        {
          title: '产品信息',
          dataIndex: 'productInfo',
          width: 300,
          scopedSlots: { customRender: 'productInfo' },
        },
        {
          title: '任务数量',
          dataIndex: 'taskQuantity',
          width: 100,
          align: 'center',
        },
        {
          title: '完成数量',
          dataIndex: 'completedQuantity',
          width: 100,
          align: 'center',
        },
        {
          title: '进度',
          dataIndex: 'progress',
          width: 120,
          scopedSlots: { customRender: 'progress' },
        },
        {
          title: '状态',
          dataIndex: 'status',
          width: 100,
          align: 'center',
          scopedSlots: { customRender: 'status' },
        },
        {
          title: '参与者',
          dataIndex: 'participantNames',
          width: 300,
          scopedSlots: { customRender: 'participantNames' },
        },
        {
          title: '计划开始',
          dataIndex: 'planStartDate',
          width: 120,
        },
        {
          title: '计划结束',
          dataIndex: 'planEndDate',
          width: 120,
        },
        {
          title: '实际开始',
          dataIndex: 'actualStartTime',
          width: 120,
          scopedSlots: { customRender: 'actualStartTime' },
        },
        {
          title: '实际结束',
          dataIndex: 'actualEndTime',
          width: 120,
          scopedSlots: { customRender: 'actualEndTime' },
        },
        {
          title: '计件标准',
          dataIndex: 'pieceRateStandard',
          width: 150,
          scopedSlots: { customRender: 'pieceRateStandard' },
        },
        {
          title: '协作类型',
          dataIndex: 'collaborationType',
          width: 100,
          align: 'center',
          scopedSlots: { customRender: 'collaborationType' },
        },
        {
          title: '最大参与数',
          dataIndex: 'maxParticipants',
          width: 100,
          align: 'center',
        },
        {
          title: '当前参与数',
          dataIndex: 'currentParticipants',
          width: 100,
          align: 'center',
        },
        {
          title: '允许部分领取',
          dataIndex: 'allowPartialClaim',
          width: 120,
          align: 'center',
          scopedSlots: { customRender: 'allowPartialClaim' },
        },
        {
          title: '备注',
          dataIndex: 'remark',
          ellipsis: true,
        },
      ],
    }
  },
  methods: {
    show(record) {
      this.visible = true
      this.loading = true
      this.loadDetail(record.id)
    },
    close() {
      this.visible = false
      this.model = {}
    },
    handleCancel() {
      this.close()
    },
    loadDetail(planId) {
      getAction(`${this.url.detail}/${planId}`)
        .then((res) => {
          if (res.success) {
            this.model = res.result || {}
          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>

<style lang="less" scoped>
.detail-item {
  margin-bottom: 12px;

  .label {
    font-weight: 500;
    color: #666;
    margin-right: 8px;
  }

  .value {
    color: #333;
  }
}
</style>
